<template>
  <div class="dialog" v-show="showMask">
    <div class="dialog-container">
      <div class="dialog-title">{{title}}</div>
      <div class="content" v-html="content"></div>
      <div class="btns">
        <div v-if="type != 'confirm'" class="default-btn" @click="closeBtn">
          {{cancelText}}
        </div>
        <div v-if="type == 'danger'" class="danger-btn" @click="dangerBtn">
          {{dangerText}}
        </div>
        <div v-if="type == 'confirm'" class="confirm-btn" @click="confirmBtn">
          {{confirmText}}
        </div>
      </div>
      <div class="close-btn" @click="closeMask"><i class="iconfont icon-close"></i></div>
    </div>

  </div>
</template>
<script>
  export default {
    name: 'Dialog',
    props: {
      value: {},
      // 类型包括 defalut 默认， danger 危险， confirm 确认，
      type: {
        type: String,
        default: 'default'
      },
      content: {
        type: String,
        default: ''
      },
      title: {
        type: String,
        default: ''
      },
      cancelText: {
        type: String,
        default: 'cancel'
      },
      dangerText: {
        type: String,
        default: '删除'
      },
      confirmText: {
        type: String,
        default: '确认'
      }
    },
    data() {
      return {
        showMask: false,
      }
    },
    methods: {
      closeMask() {
        this.showMask = false;
      },
      closeBtn() {
        this.$emit('cancel');
        this.closeMask();
      },
      dangerBtn() {
        this.$emit('danger');
        this.closeMask();
      },
      confirmBtn() {
        this.$emit('confirm');
        this.closeMask();
      }
    },
    mounted() {
      this.showMask = this.value;
    },
    watch: {
      value(newVal, oldVal) {
        this.showMask = newVal;
      },
      showMask(val) {
        this.$emit('input', val);
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .icon-close{
    font-size: 22px
  }
  .dialog {
    position: fixed
    top: 0
    bottom: 0
    left: 0
    right: 0
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    width: 100%;
    height: 100%;
    .dialog-container {
      width: 75%;
      height: 16%;
      background: #ffffff;
      position: absolute;
      top: 35%;
      left: 12%;
      border-radius:6px;
      cursor:pointer;

      .dialog-title {
        width: 100%;
        height: 5px;
        font-size: 18px;
        color: #696969;
        font-weight: 600;
        margin-top: 5px;
        box-sizing: border-box;
      }
      .content {
        font-size: 15px;
        color: #797979;
        line-height: 30px;
        padding: 0 20px;
        box-sizing: border-box;
      }
      .inp {
        margin: 10px 0 0 20px;
        width: 200px;
        height: 40px;
        padding-left: 4px;
        border-radius: 4px;
        border: none;
        background: #efefef;
        outline: none;
        &:focus {
          border: 1px solid #509EE3;
        }
      }
      .btns {
        width: 100%;
        height: 40px;
        margin-top: 0.3rem;
        bottom: 0;
        left: 0;
        text-align: right;
        box-sizing: border-box;
        &>div {
          display: inline-block;
          height: 35px;
          line-height: 35px;
          padding: 0 14px;
          color: #ffffff;
          background: #f1f1f1;
          border-radius: 8px;
          margin-right: 12px;
          cursor: pointer;
        }
        .default-btn {
          background: #4FC1E9;
          color: white;
          float:left;
          margin-left:20%;
          &:hover {
            color: #509EE3;
          }
        }
        .danger-btn {
          background: #EF8C8C;
          float:left;
          margin-left:10%;
          &:hover {
            background: rgb(224, 135, 135);
          }
          &:active {
            background: #EF8C8C;
          }
        }
        .confirm-btn {
          color: #ffffff;
          background: #509EE3;
          &:hover {
            background: #6FB0EB;
          }
        }
      }
      .close-btn {
        position: absolute;
        top: 11px;
        right: 9px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 18px;
        cursor: pointer;
        &:hover {
          font-weight: 600;
        }
      }
    }
  }
</style>
